<template>
	<view class="container">
		<u-navbar title="租金缴费" :autoBack="true" :fixed="true" :bgColor="'#ffffff'" :placeholder="true" :titleStyle="{
				color: '#333',
				fontSize: '16px',
			}"></u-navbar>

		<!-- 房屋信息 -->
		<view class="house-card" v-if="houseInfo">
			<view class="house-content">
				<image class="house-img" :src="houseInfo.house_images[0]" mode="aspectFill"></image>
				<view class="house-info">
					<view class="title">{{houseInfo.house_address}}</view>
					<view class="price">
						<text class="symbol">¥</text>
						<text class="amount">{{houseInfo.money_zu}}</text>
						<text class="unit">/月</text>
					</view>
				</view>
			</view>
			<view class="house-bottom">
				<view class="owner">房东信息：{{houseInfo.homeowner_name}}；{{houseInfo.homeowner_phone}}</view>
				<view class="date">
					<text>租赁期限：{{houseInfo.start_time }} - {{houseInfo.end_time }}</text>
					<!-- <text class="deadline">365天后到期</text> -->
				</view>
			</view>
		</view>

		<!-- 房租信息 -->
		<view class="rent-card">
			<view class="title">房租</view>
			<view class="amount">
				<text>¥</text>
				<text>{{detail.money}}</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btn" @click="handlePay">缴费</view>
	</view>
</template>

<script>
	import {
		FeeDetail,
		addPayment,
		LeaseDetailUser
	} from '@/api/lease.js'
	export default {
		data() {
			return {
				detail: {},
				houseInfo: null,
			};
		},
		onLoad(e) {
      if(e&&e.id){
        this.getFeeDetail(e.id)
      }
      if(e&&e.contract_id){
        this.getHouseDetail(e.contract_id)
      }
		},
		methods: {
			getHouseDetail(contract_id) {
				LeaseDetailUser({
          id: contract_id
				}).then((res) => {
					this.houseInfo = res.data.data
				})
			},
			getFeeDetail(id) {
				FeeDetail({
					id: id
				}).then(res => {
					console.log(res)
					this.detail = res.data.data;
				})
			},
			handlePay() {
				// 处理支付逻辑
				addPayment({
					pay_log_id: this.detail.id
				}).then((res) => {
					console.log(res.data.data)
					if (res.data.data) {
						this.payment(res.data.data)
					}
				})
			},
			payment(data) {
				uni.requestPayment({
					provider: 'wxpay', //支付类型-固定值
					appId: data.appId,
					timeStamp: data.timeStamp, // 时间戳（单位：秒）
					nonceStr: data.nonceStr, // 随机字符串
					package: data.package, // 固定值
					signType: data.signType, //固定值
					paySign: data.paySign, //签名
					success: (ress) => {
						// console.log('success:' + JSON.stringify(ress));
						uni.showToast({
							title: "支付成功",
							mask: true
						})
						this.isclick = true

						setTimeout(() => {
							this.back()
						}, 1000)
					},
					fail: function(err) {
						// console.log('fail:' + JSON.stringify(err));
						// console.log("支付失败");
						uni.showToast({
							title: '支付失败',
							mask: true,
							icon: "error"
						})
						this.isclick = true
					}
				});
			}

		},
	};
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background: #f5f6fa;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.house-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;

		.house-content {
			display: flex;
			align-items: center;
		}

		.house-img {
			width: 204rpx;
			height: 204rpx;
			border-radius: 8rpx;
      margin-right: 24rpx;
		}

		.house-info {
			.title {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			.price {
				margin-bottom: 16rpx;

				.symbol {
					font-size: 24rpx;
					color: #ff5a5f;
				}

				.amount {
					font-size: 32rpx;
					color: #ff5a5f;
					font-weight: bold;
				}

				.unit {
					font-size: 24rpx;
					color: #ff5a5f;
				}
			}
		}

		.house-bottom {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
      margin-top: 20rpx;

			.owner,
			.date {
				font-size: 26rpx;
				color: #666;
				margin-bottom: 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.deadline {
				font-size: 26rpx;
				color: #0095f8;
			}
		}
	}

	.rent-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 16rpx;
		}

		.amount {
			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24rpx;
				color: #ff0000;
			}
		}
	}

	.bottom-btn {
		position: fixed;
		left: 24rpx;
		right: 24rpx;
		bottom: calc(24rpx + env(safe-area-inset-bottom));
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #2979ff;
		border-radius: 44rpx;
		color: #fff;
		font-size: 32rpx;
	}
</style>